<template>
  <div class="statistics-table" >
    <table>
      <thead>
        <tr height="18">
          <td rowspan="2">项目代号</td>
          <td rowspan="2">检验项目</td>
          <td rowspan="2">检验依据</td>
          <td rowspan="2">申请检验类别</td>
          <td colspan="4">视同情况</td>
          <td colspan="2">实测情况</td>
          <td rowspan="2">检验结果</td>
          <td rowspan="2">项目说明</td>
          <td rowspan="2">备注</td>
        </tr>
        <tr height="18">
          <td>视同类型</td>
          <td>视同产品ID</td>
          <td>视同产品型号</td>
          <td>检验报告编号</td>
          <td>实测报告编号</td>
          <td>配置说明</td>
        </tr>
      </thead>
      <tbody >
        <tr height="18" v-for="item in list" :key="item.id">
          <td class="text-center">{{item.no}}</td>
          <td>{{item.name}}</td>
          <td>{{item.gist}}</td>
          <td class="">
            <a-select
              v-model:value="item.type"
              allowClear
              :disabled="item.tj"
              style="width: 75px"
            >
              <a-select-option value="1.△">1.△</a-select-option>
              <a-select-option value="2.○">2.○</a-select-option>
              <a-select-option value="3.△○">3.△○</a-select-option>
              <a-select-option value="4.■">4.■</a-select-option>
              <a-select-option value="5.★">5.★</a-select-option>
              <a-select-option value="6.●">6.●</a-select-option>
            </a-select>
          </td>
          <td class>
            <a-select
              v-model:value="item.stlx"
              allowClear
              :disabled="item.tj"
              style="width: 155px"
            >
              <a-select-option value="0.《公告》内产品">0.《公告》内产品</a-select-option>
              <a-select-option value="1.非公告内">1.非公告内</a-select-option>
              <a-select-option value="2.零部件">2.零部件</a-select-option>
              <a-select-option value="3.3C证书">3.3C证书</a-select-option>
            </a-select>
          </td>
          <td class="w-150px">
            <a-input v-model:value="item.stlxID" :disabled="item.tj" />
          </td>
          <td class="w-150px">
            <a-input v-model:value="item.stlxxh" :disabled="item.tj" />
          </td>
          <td class="w-150px">
            <a-input v-model:value="item.stlxbh" :disabled="item.tj" />
          </td>
          <td class="w-150px">
            <a-input v-model:value="item.scbgbh" :disabled="item.tj" />
          </td>
          <td class="w-150px">
            <a-input v-model:value="item.pzsm" :disabled="item.tj" />
          </td>
          <td class>
            <a-select
              v-model:value="item.jyjg"
              allowClear
              :disabled="item.tj"
              style="width: 65px"
            >
              <a-select-option value="0.×">0.×</a-select-option>
              <a-select-option value="1.√">1.√</a-select-option>
            </a-select>
          </td>
          <td class>
            <a-textarea  v-model:value="item.xmsm" :disabled="item.tj" :auto-size="{ minRows: 1, maxRows: 3 }"  />
          </td>
          <td class>
            <a-textarea v-model:value="item.bz" :disabled="item.tj" :auto-size="{ minRows: 1, maxRows: 3 }" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {data} from "./data.json";
  
  interface Item {
    id:number,
    no:string,
    name:string,
    gist:string,
    type:string,
    stlx:string,
    stlxID:string,
    stlxxh:string,
    stlxbh:string,
    scbgbh:string,
    pzsm:string,
    jyjg:string,
    xmsm:string,
    bz:string,
    tj?:number
  }
  
  const list = ref<Item[]>(data);
</script>
<style scoped lang="less">
  /* @import url(); 引入css类 */
  .statistics-table{
    width: calc(100vw - "#{@menuWidth}px");
    overflow-x: auto;
  }
  table {
    width: 100%;
    min-width: 1800px;
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-spacing: 0;
    background-color: #fff;
  }
  table td {
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    font-size: 13px;
    padding: 5px;
  }
  table thead{
    height: 65px;
  }
  table thead td{
    text-align: center;
  }
</style>
